<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <script type="text/javascript" src="../js/vue.js"></script>
</head>
<body>



    <!-- 
        Vue监视数据的原理：
            1.vue会监视data中所有的数据
            
            2、如何进啊册对象中的数据？
                通过setter实现监视，且要在new Vue时就传入要监测的数据。
                    (1).对象中追加的属性(即添加的属性)，Vue不做响应式处理
                    (2).若需要对追加的属性进行响应式处理，则需要使用以下API：
                        Vue.set(target,key,value)  或者
                        vm.$set(target,key,value)
                        
            3.如何检测数组中的数据？
                通过包裹数组更新元素的方法实现，本质就是做两件事：
                    (1).调用原生对应的方法对数组进行更新。
                    (2).重新解析模板，进而更新页面。   
    -->


    <!-- 后添加的数据(例如vm._data.sex='男')，没有setter和getter，所以不会响应（渲染）-->
    <!-- set()只准在data中的对象添加属性，不能在data中直接添加属性 -->
    <div id="root">
        <h1>学校信息</h1>
        <h2>名称：{{school.name}}</h2>
        <h2>校长：{{school.leader}}</h2>
        <h2>地址：{{school.address}}</h2>
        <hr/>
        <button @click="student.age.rAge++">年龄+1</button><br>
        <button @click="addSex">添加性别属性，默认值为男</button><br>
        <button @click="student.sex='女'">修改性别</button><br>
        <button @click="addFriend">在列表首位添加一个朋友</button><br>
        <button @click="correctName">修改第一位朋友名字叫张三</button><br>
        <button @click.once="addHobby">点我添加一个爱好</button><br>
        <button @click.once="correctHobby">修改第一个爱好为：你干嘛哎哟</button>
        <h1>学生信息</h1>
        <h2>姓名：{{student.name}}</h2>
        <h2 v-if="student.sex">性别：{{student.sex}}</h2>
        <h2>年龄：真实{{student.age.rAge}},对外：{{student.age.sAge}}</h2>
        <h2>朋友们</h2>
        <ul>
            <li v-for="(f,index) in friends" :key="index">
                {{f.name}}--{{f.age}}
            </li>
        </ul>
        <h2>爱好</h2>
        <ul>
            <li v-for="(h,index) in hobby" :key="index">
                {{h}}
            </li>
        </ul>
    </div>

    <script type="text/javascript">
        Vue.config.productionTip = false;//阻止vue在启动的时候生成生产提示

        const vm = new Vue({
            el:"#root",
            data:{
                school:{
                    name:'中南民族大学',
                    address:'武汉市民族大道关山街道',
                    leader:''
                },
                student:{
                    name:'张扬',
                    age:{
                        rAge:40,
                        sAge:20
                    }
                },
                friends:[
                    {name:'梦婷',age:21},
                    {name:'易摔',age:21}
                ],
                //vue中的数组不是靠getter和setter来监视的，所以不能直接改(不能直接更改数组中的某一项)
                //说白了就是数组中的项没有getter和setter
                
                /*只有当对数组进行
                    push(队尾添加)，
                    pop(队尾删除)，
                    shift(删除第一个)，
                    unshift(在第一个做添加),
                    splice(指定位置删除添加替换)，
                    sort(排序)，
                    reverse(倒序)
                才会监听，
                因为vue管理的数组方法不是原型Array的方法，而是重写后的方法。
                重写后的方法不仅仅调用了原型Array中的方法，另外还添加了一项重新解析。*/

                hobby:["唱","跳","rap"]
            },
            methods:{
                addSex(){
                    Vue.set(this.student,'sex','男')
                },
                addHobby(){
                    this.hobby.push('篮球')
                },
                addFriend(){
                    this.friends.unshift({name:'who?',age:"unknown"})
                },
                correctName(){
                    this.$set(this.friends[0],'name','张三')
                    Vue.set(this.friends[0],'age',19)
                },
                correctHobby(){
                    this.hobby.splice(0,1,"哎哟你干嘛~~~~~~~~~~")
                }
            }
        })
   </script>
</body>
</html>